import {
  Component,
  ViewEncapsulation,
  ChangeDetectionStrategy,
  forwardRef,
  ChangeDetectorRef,
  SimpleChanges,
  Input,
  TemplateRef,
  OnChanges,
  OnInit,
} from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { CalendarBaseComponent } from '../core/calendar-base/calendar-base.component';
import { I18NService, DateService, StandardDate, InputBoolean, LvDateRangeTag } from '../core/api';
import { DEFAULT_YEARSOPERATE, LvYearsOperate } from './interface';

@Component({
  selector: 'lv-date-picker-year',
  templateUrl: './date-picker-year.component.html',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef((): typeof DatePickerYearComponent => DatePickerYearComponent),
      multi: true,
    },
  ],
  host: {
    class: 'lv-date-picker-year',
  },
})
export class DatePickerYearComponent extends CalendarBaseComponent implements OnInit, OnChanges {
  @Input() lvTag: LvDateRangeTag; // for date range picker

  @Input() lvCalendarYearCell: TemplateRef<Date> | null;

  @Input() @InputBoolean() lvOnlyShowActiveCell = false; // 是否显示上10年、下10年的单元格

  @Input() @InputBoolean() lvPanelTitleReadonly = false;

  @Input() lvCalendarYearOperate: LvYearsOperate = DEFAULT_YEARSOPERATE; // 面板头部年份操作

  activeDateYearRange;

  show10YearsPanel = false;
  constructor(
    public cdr: ChangeDetectorRef,
    public dateService: DateService,
    public i18n: I18NService,
  ) {
    super(cdr, dateService);
    this.prefixCls = 'lv-date-picker-year';
  }

  trackByIndex(index): any {
    return index;
  }

  ngOnInit(): void {
    this.renderCalendarYearUI();
  }

  renderCalendarYearUI(): void {
    this.renderCalendarYearHeader();
    this.renderCalendar({ showYearPanel: true });
  }

  doSelect(value): void {
    this.value = new StandardDate(value);
    this.valueChange.emit(this.value);
    this.renderCalendarYearUI();
  }

  tenYearsChange(e): void {
    const num = e.getYear() - this.activeDate.getYear();
    this.addYear(num);
    this.show10YearsPanel = false;
  }

  selectCalendarYearCell(cell): void {
    if (this.lvPickerMode === 'year' && cell.isDisabled) {
      return;
    }
    this.doSelect(cell.value);
  }

  addYear(num): void {
    this.activeDate = new StandardDate(this.activeDate.addYears(num));
    this.lvActiveDateChange.emit({ tag: this.lvTag, value: this.activeDate });
    this.renderCalendarYearUI();
  }

  renderCalendarYearHeader(): void {
    this.activeDateYearRange = `${this.activeDate.getYear() - (this.activeDate.getYear() % 10)} - ${
      this.activeDate.getYear() - (this.activeDate.getYear() % 10) + 9
    }`;
  }

  ngOnChanges(changes: SimpleChanges): void {
    const flag =
      changes.lvActiveDate ||
      this.isDateChange(changes.value) ||
      this.isDateChange(changes.selectedValue) ||
      this.isDateChange(changes.hoverValue);
    if (flag) {
      this.lvActiveDate && (this.activeDate = this.lvActiveDate);
      this.renderCalendarYearUI();
    }
  }
}
